import Configs from "@/config";
import { Square } from "@/core/Square";
import { IViewer } from "@/core/types";
import React from "react";

export class SquarePageViewer implements IViewer {
  show(_sq: Square): void {
    throw new Error("show Method not implemented.");
  }
  remove(): void {
    throw new Error("remove Method not implemented.");
  }
  constructor(showFn: (sq: Square) => void, removeFn: () => void) {
    this.show = showFn;
    this.remove = removeFn;
  }
}

interface ISquareCompProps {
  square: Square;
}
export const SquareComp: React.FC<ISquareCompProps> = ({ square }) => {
  if (!square) return null;
  // 小方块
  return (
    <div
      className="square absolute"
      style={{
        width: `${Configs.SquareSize}px`,
        height: `${Configs.SquareSize}px`,
        top: `${square.point.y * Configs.SquareSize}px`,
        left: `${square.point.x * Configs.SquareSize}px`,
        background: square.color,
        border: "1px solid #ccc",
      }}
    ></div>
  );
};
